<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>纯CSS3实现可感知方向的卡片翻转动画DEMO演示</title>

<link rel="stylesheet" href="style.css">

</head>

<body>
  <div class='tiles'>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
</div>
 
</body>
</html>
